<template>
    <div class="list">  
           <van-panel title="我的功能">
              <ul>
                  <li v-for="item in list1" :key="item.title">
                      <span class="iconfont icon" v-html="item.icons" v-bind:class="[item.icon1Class, item.icon2Class,
                      item.icon3Class,item.icon4Class,item.icon5Class]"></span>
                      <span class="title">{{item.title}}</span>
                  </li>
             </ul>
           </van-panel>

             <van-panel title="我的服务">
              <ul>
                  <li v-for="item in list2" :key="item.title">
                      <span class="iconfont icon" v-html="item.icons" v-bind:class="[item.icon6Class, item.icon7Class]"></span>
                      <span class="title">{{item.title}}</span>
                  </li>
             </ul>
           </van-panel>

            <van-panel title="更多推荐">
              <ul>
                  <li v-for="item in list3" :key="item.title">
                      <span class="iconfont icon" v-html="item.icons" v-bind:class="[item.icon8Class, item.icon9Class,
                      item.icon10Class,item.icon11Class,item.icon12Class,item.icon13Class]"></span>
                      <span class="title">{{item.title}}</span>
                  </li>
             </ul>
           </van-panel>
    </div>
</template>

<script>

export default {
    name:'MineList',
    data (){
        return {
            list1:[
                {
                  icons:'&#xe608;', 
                  title:'我的地址',                  
                  icon1Class:'icon1'
                },{
                  icons:'&#xe677;',  
                  title:'我的足迹',                 
                  icon2Class:'icon2'
                },{
                  icons:'&#xe60d;', 
                  title:'我的收藏',                  
                  icon3Class:'icon3'
                }
                ,{
                  icons:'&#xe634;', 
                  title:'答谢记录',                  
                  icon4Class:'icon4'
                }
                ,{
                  icons:'&#xe639;', 
                  title:'我的评价',                  
                  icon5Class:'icon5'
                }],

                list2:[    
                {
                  icons:'&#xe6fb;', 
                  title:'帮助与反馈',                  
                  icon6Class:'icon1'
                },{
                  icons:'&#xe615;',  
                  title:'客服中心',                 
                  icon7Class:'icon2'
                }],

                   list3:[ 
                 {
                  icons:'&#xe606;', 
                  title:'邀请有奖',                  
                  icon8Class:'icon1'
                },{
                  icons:'&#xe616;',  
                  title:'商家入驻',                 
                  icon9Class:'icon2'
                },{
                  icons:'&#xe82e;', 
                  title:'骑手招募',                  
                  icon10Class:'icon3'
                }
                ,{
                  icons:'&#xe688;', 
                  title:'我要合作',                  
                  icon11Class:'icon4'
                } ,{
                  icons:'&#xe652;', 
                  title:'美团公益',                  
                  icon12Class:'icon5'
                },{
                  icons:'&#xe7ee;', 
                  title:'能量捐赠',                  
                  icon13Class:'icon5'
                }
            ]
        }
    }
}
</script>

<style scoped>
.list{
    overflow:hidden;
    position: absolute;
    left:0;
}
ul{
     display:flex;
     justify-content: flex-start;
     width:100%;
     flex-wrap: wrap;
     box-sizing: border-box;
     overflow:hidden;
 }
 ul li{
     width:24%;
     display:flex;
     flex-direction: column; 
     text-align: center;
     margin-top:5px;
 }
.van-cell{
    font-weight: bold;
}
.title{
    font-size:14px;
}
.icon1 {
    color:#FFB633;
    background-color:#fff;
    font-size:30px;
}
.icon2 {
    color:#FE9F33;
    background:#fff;
    font-size:30px;
}
.icon3,.icon4,.icon5{
     color:#FFB633;
     font-size:30px;
}
.icon6 {
    color:#FFB633;
    background-color:#fff;
    font-size:30px;
}
.icon7 {
    color:#252525;
    background:#fff;
    font-size:30px;
}
.icon8 {
    color:#FFB633;
    background-color:#fff;
    font-size:26px;
}
.icon9 {
    color:#FE9F33;
    background:#fff;
    font-size:30px;
}
.icon10,.icon11,.icon12,.icon13{
     color:#FFB633;
     font-size:30px;
}
</style>